import 'package:flutter/material.dart';
import 'package:imitatectripapp/model/common_model.dart';
import 'package:imitatectripapp/model/sales_box_model.dart';
import 'package:imitatectripapp/widget/webview.dart';

// 底部卡片入口
class SalesBox extends StatelessWidget {
  final SalesBoxModel salesBox;
  const SalesBox({Key key, this.salesBox}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: _items(context),
    );
  }

// 创建_items灵活的活动卡片
  _items(BuildContext context) {
    if (salesBox == null) return null;
    List<Widget> items = [];
    items.add(_doubleItem(
        context, salesBox.bigCard1, salesBox.bigCard2, true, false));
    items.add(_doubleItem(
        context, salesBox.smallCard1, salesBox.smallCard2, false, false));
    items.add(_doubleItem(
        context, salesBox.smallCard3, salesBox.smallCard4, false, true));
    return Column(
      children: <Widget>[
        // 热门活动，更多活动的标题区域
        Container(
          height: 44,
          margin: EdgeInsets.only(left: 10),
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(width: 1, color: Color(0xfff2f2f2)))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Image.network(
                salesBox.icon,
                height: 15,
                fit: BoxFit.fill,
              ),
              Container(
                padding: EdgeInsets.fromLTRB(10, 1, 8, 1),
                margin: EdgeInsets.only(right: 7),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    gradient: LinearGradient(
                      colors: [
                        Color(0xffff4e63),
                        Color(0xffff6cc9),
                      ],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                    )),
                child: GestureDetector(
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => WebView(
                                  url: salesBox.moreUrl,
                                  title: '更多活动',
                                )));
                  },
                  child: Text(
                    '获取能多福利 >',
                    style: TextStyle(color: Colors.white, fontSize: 12),
                  ),
                ),
              )
            ],
          ),
        ),
        // 可配置的不同的卡片区域
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: items.sublist(0, 1)),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: items.sublist(1, 2)),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: items.sublist(2, 3)),
      ],
    );
  }

  _doubleItem(BuildContext context, CommonModel leftCard, CommonModel rightCard,
      bool isBigCard, bool last) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        _item(context, leftCard, isBigCard, true, last),
        _item(context, rightCard, isBigCard, false, last),
      ],
    );
  }

// 底部卡片的某一项展示
  Widget _item(BuildContext context, CommonModel model, bool isBig, bool left,
      bool last) {
    BorderSide border = BorderSide(width: 0.8, color: Colors.grey[300]);
    return GestureDetector(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => WebView(
                      url: model.url,
                      statusBarColor: model.statusBarColor,
                      hideAppBar: model.hideAppBar,
                    )));
      },
      child: Container(
        decoration: BoxDecoration(
            border: Border(
                right: left ? border : BorderSide.none,
                bottom: last ? BorderSide.none : border)),
        child: Image.network(model.icon,
            fit: BoxFit.fill,
            width: MediaQuery.of(context).size.width / 2 - 10, //获取屏幕的宽高
            height: isBig ? 129 : 80),
      ),
    );
  }
}
